<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	$(function(){
		$("th").append("<span style='color: red;'>*</span>");
	})
</script>
</head>
<body>


    <h2 style="margin-right: 180px">尊敬的客户欢迎您注册为会员</h2><br />
	<form action="user.action?methodName=doAddUser"method="post">
		<table   align="center" width="80%"  >
			<tr>
				<th class="textright">用户名：</th>
				<td class="textleft">
					<input type="text" name="userName" style="color: black;" />
				</td>
				<td id="resultUsername"></td>
			</tr>
			<tr>
				<th class="textright">密码：</th>
				<td class="textleft">
					<input type="password" name="password" style="color: black;" />
				</td>
				<td id="resultPassword"></td>
			</tr>
			<tr>
				<th class="textright">确认密码：</th>
				<td class="textleft">
					<input type="password" name="againPassword" style="color: black;" />
				</td>
				<td id="resultAgainPassword"></td>
			</tr>
			<tr>
				<th class="textright">电话号码：</th>
				<td class="textleft">
					<input type="text" name="tel" style="color: black;" />
				</td>
				<td id="resultTel"></td>
			</tr>
		<!-- 	<tr>
				<th class="textright">用户角色：</th>
				<td class="textleft">
					<select name="userRoles" id="">
						<option value="">--请选择--</option>
						<option value="01">管理员</option>
						<option value="02">普通会员</option>
					</select>
				</td>
				<td id="resultUserRoles"></td>
			</tr> -->
			<tr>
				<th class="textright">昵称：</th>
				<td class="textleft">
					<input type="text" name="nickName"  style="color: black;"/>
				</td>
				<td id="resultNickName"></td>
			</tr>
			<tr>
				<th class="textright">Email：</th>
				<td class="textleft">
					<input type="text" name="email" style="color: black;" />
				</td>
				<td id="resultEmail"></td>
			</tr>
			<!-- <tr>
				<th class="textright">注册时间：</th>
				<td class="textleft">
					<input type="text" name="regTime" />
				</td>
				<td id="resultRegTime"></td>
			</tr> -->
			<tr>
			
				<td colspan="3" style="margin-right: 200px"><br />
				</td>
			</tr>
		</table>
		<div style="margin-right: 180px">
			<input type="submit" value="提交"  style="color: black;margin-right: 30px" id="register"/>
			<input type="button" value="返回" onclick="window.location='doLogin.action?methodName=toLogin'" style="color: black;"	/>
		</div>
	</form>
	
	
</body>

	<link rel="stylesheet" href="${pageContext.request.contextPath }/css/editTablestyles.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath }/webjars/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/listTable.js"></script>
	<script type="text/javascript">
		$(function() {
			$("form").click(function() {
				var userName = $("input[name='userName']").val();
				var password = $("input[name='password']").val();
				var againPassword = $("input[name='againPassword']").val();
				var tel = $("input[name='tel']").val();
				var regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
				var userRoles = $("input[name='userRoles']").val();
				var nickName = $("input[name='nickName']").val();
				var Email = $("input[name='email']").val();
				var regEmail = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
			/* 	var regTime = $("input[name='regTime']").val();
				var date = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; */

				if(userName == "") {
					$("#resultUsername").html("请输入用户名！");
					return false;
				}
				
				if(userName.length<5||userName.length>20) {
					$("#resultUsername").html("用户名长度必须是5至20之间！");
					return false;
				}else{
					/* $("#resultUsername").html(""); */
					$("#resultUsername").html("√");
				
				}
				
				if(password == "") {
					$("#resultPassword").html("请输入密码！");
					return false;
				}
				
				if(password.length<4||password.length>20) {
					$("#resultPassword").html("密码长度必须是4至20之间！");
					return false;
				}else{
					$("#resultPassword").html("√");
				}
				
				if(againPassword == "") {
					$("#resultAgainPassword").html("确认密码不能为空！");
					return false;
				}
				
				if(againPassword.length<4||againPassword.length>20) {
					$("#resultAgainPassword").html("确认密码长度必须是4至20之间！");
					return false;
				}
				
				if(againPassword != password) {
					$("#resultAgainPassword").html("两次密码不一致！");
					return false;
				}else if(againPassword == password){
					$("#resultAgainPassword").html("√");
				}
				
				if(tel == "") {
 					$("#resultTel").html("请输入电话号码！");
					return false;
				}
				
				if (!regPhone.test(tel)) {
					$("#resultTel").html("请输入正确的11位手机号！");
					return false;
				}else{
					$("#resultTel").html("√");
				}
				/* if(userRoles==0) {
					$("#resultUserRoles").html("请输入用户角色！");
					return false;
				} */
				if(nickName=="") {
					$("#resultNickName").html("请输入昵称！");
					return false;
				}else{
					$("#resultNickName").html("√");
				}
				
				if(Email == "") {
					$("#resultEmail").html("请输入的邮箱!");
                    return false;
				}
				
				if (!regEmail.test(Email)) {
					$("#resultEmail").html("对不起，您输入的邮箱格式不正确!");
                     return false;
				}else{
					$("#resultEmail").html("√");
				} 
				/* if(regTime == "") {
					$("#resultRegTime").html("请输入时间！");
					return false;
				}
				if (!date.test(regTime)) {
					$("#resultRegTime").html("时间格式不符合！");
					return false;
				} */
				
				
				
			});
		});
	
	
	
	
	
	</script>
	
	
			
	
	
	

</html>